<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="会员手机号">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="昵称">
                            <el-input v-model="form.nickName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员姓名">
                            <el-input v-model="form.realName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="美学设计师手机号">
                            <el-input v-model="form.refereePhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="注册时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号状态">
                            <el-select v-model="form.status" placeholder="请选择账号状态">
                            <el-option label="开" value="0"></el-option>
                            <el-option label="关" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                            <el-button type="primary" @click="toRoutes('vipAdd')">新增</el-button>
                            <!-- <el-button type="primary">导出</el-button> -->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="userId"
                    label="用户ID"
                >
                </el-table-column>
                <el-table-column
                    prop="nickName"
                    label="会员昵称"
                >
                </el-table-column>
                <el-table-column
                    prop="realname"
                    label="会员姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="会员手机号"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    label="证件类型"
                >
                    <template slot-scope="scope">
                        {{scope.row.identityType | cardType}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="identity"
                    label="证件号码"
                >
                </el-table-column>
                <el-table-column
                    prop="refereeName"
                    label="美学设计师姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="referee"
                    label="美学设计师手机号"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="注册时间"
                >
                </el-table-column>
                <el-table-column fixed="right" width="80" align="center"  label="账号状态">
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.status"
                        @click.native="swithFn(scope.row.userId,scope.row.status)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="0"
                        :inactive-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                >
                <template slot-scope="scope">
                    <el-button @click="toRoutes('editVip',scope.row.userId)" type="text" size="small">编辑</el-button>
                    <el-button @click="toRoutes('vipInfo',scope.row.userId)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="toRoutes('joinFacilitator',scope.row.userId)">加入美学设计师</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import vipManage from '@/api/vipManage'
    export default {
        name:"vipIndex",
        data() {
            return {
                tableLoading:true,
                dates:[],
                form: {
                    username: '',
                    nickName: '',
                    realName: '',
                    refereePhone: '',
                    status: "",
                    createdAtStart:'',
                    createdAtEnd:'',
                    pageNum:1,
                    pageSize:10,
                },
                tableData: [],
                page_sizes:[10,30,50,100],
                page_totals:60,
                listForm:{
                    pageNum:1,
                    pageSize:10,
                },
            }
        },
        filters:{
            cardType: function(e){
                return window.helper.cardType(String(e))
            },
        },
        mounted(){
            this.getList(this.listForm)
        },
        methods: {
            //成功状态弹窗
            succStatus(txt){
                this.$message({
                    message: txt+'成功',
                    type: 'success'
                });
            },
            //失败状态弹窗
            errorStatus(txt){
                this.$message.error(txt+'失败');
            },
            //列表数据获取
            getList(e){
                this.tableLoading = true
                let datas = e
                vipManage.getSearchList(datas).then(res => {
                    // console.log(res)
                    if(!res.data.code){
                        // console.log(res)
                        this.tableData = res.data.data.list
                        this.page_totals = res.data.data.count
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.tableLoading = false
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            },
            // 查询
            searchFn() {
                this.form.pageNum = 1
                if(this.dates!=null){
                    if(this.dates.length){
                        this.form.createdAtStart = this.dates[0];
                        this.form.createdAtEnd = this.dates[1];
                        this.getList(this.form)
                    }else{
                        this.getList(this.form)
                    }
                }else{
                    this.form.createdAtStart = "";
                    this.form.createdAtEnd = "";
                    this.getList(this.form)
                }
                // console.log(JSON.stringify(this.form))
            },
            //账号状态修改
            swithFn(userId,status){
                let datas = {userId,status}
                vipManage.updateStatus(datas).then(res => {
                    if(!res.data.code){
                        this.succStatus("修改")
                        this.getList(this.listForm)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            },
            // 路由跳转
            toRoutes(e,userId) {
                let route = {name:e,query:{userId:userId}}
                this.$router.push(route)
            },
            //改变页面条数
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList(this.form)
            },
            //选择页数
            handleCurrentChange(val) {
                this.form.pageNum = val
                this.getList(this.form)
            }
        }
    }
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner{width: 236px}
</style>
